<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body {
            height: 3000px;
        }
    </style>

    <script>

        var oDiv = document.getElementById('a') ;
        console.log(oDiv) ;  // null 


        // 等到页面资源加载完毕之后再执行
        window.onload = function() {
            var oDiv = document.getElementById('a') ;
            console.log(oDiv) ;
        }

    </script>
</head>

<body>

    <div id="a"></div>

    <script>

        // 焦点事件
        //    onfocus  /  onblur
        //    默认的时候，既没有失去也没有获取焦点
        //       默认情况下，获取焦点的页面资源是充足的，失去焦点的页面资源也会延缓

        
        //    onload 事件   等到页面资源加载完毕之后再执行

        //   onscroll  滚动条事件   --- 高频率触发的事件

        //   onresize  窗口大小发生改变  --- 高频率触发的事件  --- 淘宝适配的源码 ---- 防抖

        console.log(777) ;
        window.onfocus = function() {
            console.log('focus'); 
        }

        window.onblur = function() {
            console.log('blur'); 
        }

        window.onscroll = function() {
            console.log('到底了，别啦了') ;
        }

        window.onresize = function() {
            console.log('窗口大小被改变了')
        }

    </script>
    
</body>
</html>